<template>
  <li @click="toDetail(item.bookId)" class="list-template" :class="diff">
    <div class="cover">
      <img :src="item.coverUrl" v-default-img="defaultImg" />
      <div class="top-num" v-show="index">
        <span>TOP</span>
        <span class="num" v-text="index"></span>
      </div>
    </div>
    <div class="info">
      <h3
        class="ellipsis bookTitle"
        v-html="item.bookTitle || item.bookName"
      ></h3>
      <p class="authorName">
        <span class="ellipsis" v-html="item.authorName"></span>
        <button class="preview">Preview</button>
      </p>
      <p class="ellipsis-two bookIntro" v-html="item.bookIntro"></p>
      <div class="category" v-if="item.category && item.category.name">
        <span v-text="item.category.name"></span>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/default-cover.png"),
    };
  },
  props: {
    item: {
      type: Object,
    },
    diff: {
      type: String,
    },
    index: [Number, String],
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 跳转详情页
    toDetail(id) {
      this.$router.push({
        name: "bookDetail",
        params: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-template {
  width: 100%;
  height: 164px;
  display: flex;
  justify-content: space-between;
  .cover {
    width: 130px;
    height: 100%;
    img {
      width: 130px;
      height: 100%;
      border-radius: 6px;
    }
    .top-num {
      width: auto;
      height: 28px;
      border-top-left-radius: 6px;
      line-height: 28px;
      padding: 0 5px;
      text-align: center;
      color: #fff;
      font-weight: bolder;
      background: linear-gradient(90deg, #ef6a59 0%, #e25176 100%);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      .num {
        padding-left: 4px;
      }
    }
  }
  .info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 20px;
    overflow: hidden;
    .category {
      width: 78px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      background: rgba(232, 100, 114, 0.2);
      span {
        font-size: 14px;
        font-weight: 500;
        color: #e86472;
        font-family: PingFangSC-Medium, PingFang SC;
      }
    }
    .authorName {
      // margin: 6px 0 14px 0;
      line-height: 28px;
      color: #999999;
      .preview {
        display: none;
      }
    }
    .ellipsis-two {
      &.bookIntro {
        max-height: 52px;
        color: #666666;
        line-height: 26px;
      }
    }
    .ellipsis {
      &.bookTitle {
        font-size: 28px;
        max-height: 72px;
        line-height: 36px;
      }
    }
  }
  &.home-rankings,
  &.rankings-list {
    height: 152px;
    .cover {
      width: 120px;
      height: 100%;
      position: relative;
      img {
        width: 120px;
        height: 100%;
      }
    }
    .info {
      padding-left: 16px;
      .category {
        height: 0;
        visibility: hidden;
      }
    }
  }
  &.home-favorite,
  &.library-list {
    height: 216px;
    margin-bottom: 30px;
    align-items: flex-end;
    .cover {
      width: 170px;
      height: 100%;
      img {
        width: 170px;
        height: 100%;
        border-radius: 10px;
      }
    }
    .info {
      height: 190px;
      justify-content: space-around;
      background: linear-gradient(312deg, #ffffff 0%, #ffe3e6 100%);
    }
    &.library-list .info {
      background: #fff;
    }
  }
  &.rankings-list,
  &.search-list {
    height: 216px;
    margin-bottom: 30px;
    .cover {
      width: 170px;
      img {
        width: 170px;
      }
      .top-num {
        border-top-left-radius: 10px;
      }
    }
    .info {
      padding-left: 17px;
      justify-content: space-around;
      .bookTitle {
        order: 1;
      }
      .bookIntro {
        order: 2;
      }
      .authorName {
        order: 3;
        display: flex;
        justify-content: space-between;
        .preview {
          width: 120px;
          height: 38px;
          color: #fff;
          background: #e86472;
          border-width: 0;
          border-radius: 6px;
          display: block;
        }
      }
      .category {
        display: none;
      }
    }
  }
}
</style>
